<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center myAttention_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub myAttention_fd0_0'>
					<view class='flex flex-wrap align-center myAttention_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  myAttention_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='myAttention_fd0_0_c1_c0'>增值服务</text>
					</view>
					<view class='flex flex-wrap align-center justify-end myAttention_fd0_0_c0'>
					</view>
				</view>
			</view>

			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<!-- 			<view style="width: 750rpx;padding-left: 2rpx;padding-bottom: 4rpx;">
				<u-tabs :list="jingang" :current='current' @change='changes' height="80" bar-width="26" bar-height="6"
					inactive-color="#707072" :is-scroll="true" name="subject_name" active-color="#333333"
					:bar-style='barTstyle'></u-tabs>
			</view> -->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
				<block v-if="isshow">
					<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout homePage_flex_4">
						<view class='flex flex-wrap ' style="justify-content: space-between;">
							<view class='flex flex-direction flex-wrap  homePage_fd4_0_c0' v-for="(item,index) in homeList"
								:key="index">
								<!-- @tap.stop="handleJumpDiy" data-type="navigateTo"
								:data-url="`/pages/homePage/vipInfo/vipInfo?id=${item.aid}`" -->
								<!-- <image class='homePage_fd4_0_c0_c0' mode="aspectFill" :src='item.cover'></image> -->
								<view class='flex align-center service_bodyItemfd2_0_c3_c1_c0_c1'>
									<text class='service_bodyItemfd2_0_c3_c1_c0_c1_c1'>服务名称:{{item.name}}</text>
								</view>
								<view class='flex align-center service_bodyItemfd2_0_c3_c1_c0_c11'>
									<view>
										<text class='service_bodyItemfd2_0_c3_c1_c0_c2_c0'>价格:{{item.priceYuan}}元</text>
									</view>

									<view class="goumaia" style="margin-left: auto;" @tap.stop="yuyue(item,0)">
										<text style="font-size: 32rpx;color: #ffffff;">直接预约</text>
									</view>
									<view class="goumai" style="margin-left: 10rpx;" @tap.stop="yuyue(item,1)" v-if="isOnlines==1">
										<text style="font-size: 32rpx;color: #ffffff;">购买鞋套</text>
									</view>
								</view>

							</view>
						</view>
					</view>

				</block>

				<view class="jingqu" style="margin-top: 20rpx;margin-bottom: 18rpx;">
					<text style="font-size: 32rpx;font-weight: 500;">海盐县通元镇丰义景区玻璃栈道游客需知</text>
				</view>
				<view class="" style="display: flex; flex-direction: column;padding-left: 16rpx;padding-right: 16rpx;">
					<text class="ziti" style="">1.禁止危险行为：严禁奔跑、跳跃、追逐打闹、摇晃栏杆或故意踩踏玻璃。</text>
					<text class="ziti" style="">2.禁止抛物：严禁向玻璃栈道投掷任何物品（包括硬币等），避免损坏玻璃表面。</text>
					<text class="ziti" style="">3.装备要求：需更换防滑鞋套，禁止穿高跟鞋、凉鞋等易滑鞋类。</text>
					<text class="ziti" style="">4.携带物品：禁止携带登山杖、金属雨伞、尖锐物品、宠物及大件行李进入栈道；建议轻装游览，仅携带手机、相机等必要物品。</text>
					<text class="ziti" style="">5.人群限制：心脏病、高血压、恐高症、眩晕症患者，以及孕妇、高龄老人、低龄儿童等需在家属陪同下谨慎进入。</text>
					<text class="ziti" style="">6.请服从工作人员指引，按单行道有序通行，禁止插队或逆向行走。</text>
					<text class="ziti" style="">7.请遵守景区公示的开放时间及安全提示，恶劣天气时暂停游览。</text>
					<text class="ziti" style="">8.预约成功之后，可在我的预约记录中使用。</text>
				</view>

				<block v-if="isshow==false">
					<view style="display: flex;justify-content: center;margin-top: 106rpx;width: 750rpx;">
						<image src='../../../static/images/order.png' mode="aspectFill" style="width:440rpx;height: 328rpx;">
						</image>
					</view>
				</block>
				<benben-popup v-model="popupShow1656992350800" :mask="true" :mask-close-able="true" mode='center'>
					<view class="flex flex-direction flex-wrap align-center system_flex_2">
						<text class='system_fd2_0'>提示</text>
						<view>
							<text class='system_fd2_1' v-if="type==1">购买数量:</text>
							<u-number-box v-model="value" @change="valChange" :min="1" :max="10" :disabledInput="true"
								v-if="type==1"></u-number-box>
						</view>
						
						<text class='system_fd2_1'
							style="margin-top: 20rpx;margin-left: 20rpx;"  v-if="type==1">确定预约{{sionFeeinfoA.startTime}}-{{sionFeeinfoA.endTime}},并去购买鞋套吗?</text>
							<text class='system_fd2_1'
								style="margin-top: 20rpx;margin-left: 20rpx;" v-else>确定预约{{sionFeeinfoA.startTime}}-{{sionFeeinfoA.endTime}}吗?</text>
						<view class='flex align-center system_fd2_2'>
							<button class='system_fd2_2_c0' @tap.stop="popupShow1656992350800=false">取消</button>
							<button class='system_fd2_2_c1' @tap.stop="confirmFunc()">确定</button>
						</view>
					</view>
				</benben-popup>
			</view>
			<view class="flex flex-wrap align-center justify-center benben-position-layout flex system_flex_3"
			  @tap.stop="goUse" v-if='statsus==1'>
			  <button class='system_fd3_0'>前往入场</button>		
			</view>
			<u-loadmore v-if="last_page > 1" class="loadmore" font-size="24" :status="status" :icon-type="iconType"
				:load-text="loadText" />
			<!---flex布局flex布局结束-->


		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				twoList: '',
				current: 0,
				jingang: [{
						id: 0,
						name: '有效卡'
					},
					{
						id: 1,
						name: '过期卡'
					}
				],
				isshow: '',
				homeList: [],
				aid: '',
				barTstyle: {
					backgroundColor: '#167deb',
					'border-radius': '2rpx'
				},
				selectedItem: 0,
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				scenicId: '',
				isOnlines: '',
				sionFeeinfoA: '',
				sionFeeinfoB: '',
				"popupShow1656992350800": false,
				numValue: '',
				type: '',
				value: 1,
				statsus:''
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.scenicId = uni.getStorageSync('Ida')
			this.sionFeeinfoA = JSON.parse(options.info)
			this.numValue = options.numValue
			console.log(this.sionFeeinfoA, this.numValue, 'this.sionFeeinfoA')
			this.Online()
			this.gethomeList()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			// if (this.last_page == undefined) return
			// if (this.page >= this.last_page) return;
			// this.status = 'loading';
			// this.page++;
			// setTimeout(() => {
			// 	if (this.page >= this.last_page) this.status = 'nomore';
			// 	else this.status = 'loading';
			// 	this.is_pull = false;
			// 	this.getfollowList();
			// }, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.value = e.value
			},
			goUse() {
				console.log('111')
				uni.reLaunch({
					url: '/pages/my/service/service'
				})
			},
			//隐藏人脸录入以上线
			async Online() {
				//请求方法
				let res = await this.$api.get(global.apiUrls.isOnline);
				this.isOnlines = res.data.msg
				console.log(this.isOnlines, '0隐藏  1上线成功isOnlinesisOnlinesisOnlines')
				
			},

			changes(e) {
				console.log(e, 'tab栏索引')
				this.current = e
				// this.aid = this.jingang[e].aid
				this.gethomeList()
			},
			yuyue(item, type) {
				this.popupShow1656992350800 = true
				this.sionFeeinfo = item
				this.type = type
			},
			//查询增值列表
			async gethomeList() {
				uni.showLoading({
					title: '加载中'
				})
				let res = await this.$api.get(global.apiUrls.shoeCover, {
					scenicId: this.scenicId
				});
				if (res.data.code != 200) {
					this.$message.info(res.data.msg);
					return
				}
				this.homeList = res.data.rows
				uni.hideLoading()
				if (this.homeList == null || this.homeList == []) {
					this.isshow = false
				} else {
					this.isshow = true
				}
				console.log(this.homeList, '增值列表')
			},
			//直接预约
			//确定预约
			async confirmFunc() {
				if (this.type == 1) {
					if (this.value > this.numValue) {
						this.$message.info('鞋套数量不可大于预约门票数量');
						return
					}

					uni.navigateTo({
						url: `/pages/classification/pay/pay?info=${JSON.stringify(this.sionFeeinfo)}&numXieValue=${this.value}&buyCount=${this.numValue}&ticketId=${this.sionFeeinfoA.id}`
					})
					this.popupShow1656992350800 = false
					return
				}
				uni.showLoading({
					title: '预约中'
				})
				let res = await this.$api.post(global.apiUrls.reservation, {
					buyCount: Number(this.numValue), //门票数量
					payMethod: 0,
					scenicId: this.sionFeeinfoA.scenicId, //景区id
					ticketId: this.sionFeeinfoA.id, //门票id
					services: []
				});
				if (res.data.code != 200) {
					this.$message.info(res.data.msg);
					return
				}
				let ID = res.data.data
				this.pay(ID)
				this.popupShow1656992350800 = false
			},
			async pay(ID) {

				let requestUrl = `${global.apiUrls.Payrequest}/${ID}`;
				let res = await this.$api.post(requestUrl);


				if (res.data.code != 200) {
					this.$message.info(res.data.msg);
					return
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 800)
				this.statsus=1
				this.$message.info('预约成功,可在我的预约记录中使用')
				this.popupShow1656992350800 = false
			},


		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #f8f8fa;
		background-size: 100% auto;
	}

	.activeaaa {
		/* 单独选中项的样式 */
		font-size: 28rpx !important;
		background: #feede0 !important;
		color: #f48c40;
	}

	.footPrint_bodyItemfd4_0_c3_c0_c0_c0_c1_c0_c0_c0_c0_c0_c1 {
		color: #FFFFFF;
		font-size: 20rpx;
		font-weight: 400;
	}

	.footPrint_bodyItemfd4_0_c3_c0_c0_c0_c1_c0_c0_c0_c0_c0_c0 {
		width: 18rpx;
		height: 18rpx;
		margin-left: 8rpx;
		margin-right: 7rpx
	}

	.footPrint_bodyItemfd4_0_c3_c0_c0_c0_c1_c0_c0_c0_c0_c0_c01 {
		width: 124rpx;
		height: 36rpx;
	}

	.footPrint_bodyItemfd4_0_c3_c0_c0_c0_c1_c0_c0_c0_c0_c0 {
		background: linear-gradient(126deg, #FF4538 0%, #FF6530 100%);
		background-size: 100% auto;
		width: 124rpx;
		height: 36rpx;
		border-radius: 0rpx 16rpx 0rpx 10rpx;
		position: absolute;
		//bottom: 300rpx;
		left: 223rpx;
	}

	.footPrint_bodyItemfd4_0_c3_c0_c0_c0_c1_c0_c0_c0_c0_c01 {
		border-radius: 0rpx 16rpx 0rpx 16rpx;
		position: absolute;
		//bottom: 300rpx;
		left: 223rpx;
	}

	.myAttention_flex_0 {
		background: var(--benbenbgColor1);
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myAttention_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 88rpx;
	}

	.myAttention_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.myAttention_fd0_0_c0 {
		width: 120rpx;
	}

	.myAttention_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.designPicture_flex_2 {
		margin: 24rpx 0rpx 33rpx 0rpx;
	}

	.homePage_flex_4 {
		background: #ffffff;
		background-size: 100% auto !important;
		padding: 0rpx 24rpx 0rpx 24rpx;
		width: 750rpx;
		// min-height: 600rpx;
		margin-top: 16rpx;
	}

	.homePage_fd4_0_c0 {
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 702rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding: 0rpx 0rpx 10rpx 0rpx;
		// box-shadow: 0rpx 3rpx 30rpx #E8E8E8;
		// box-shadow: 0px 1px 15px #e8e8e8
	}

	.homePage_fd4_0_c0_c0 {
		width: 700rpx;
		height: 300rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.service_bodyItemfd2_0_c3_c1_c0_c1 {
		margin: 18rpx 16rpx 0rpx 16rpx;
	}

	.service_bodyItemfd2_0_c3_c1_c0_c11 {
		margin: 12rpx 16rpx 12rpx 20rpx;
	}

	.service_bodyItemfd2_0_c3_c1_c0_c1_c1 {
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		font-weight: 700;
		line-height: 40rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 0rpx 0rpx 0rpx 2rpx;
		max-width: 500rpx;
	}
.ziti{
	font-size: 28rpx;
	 margin-bottom: 10rpx;
	 letter-spacing: 2rpx;
}
	.jingqu {
		display: flex;
		justify-content: space-around;
		align-items: center;

	}

	.service_bodyItemfd2_0_c3_c1_c0_c2 {
		margin: 0rpx 20rpx 0rpx 20rpx;
	}

	.service_bodyItemfd2_0_c3_c1_c0_c2_c0 {
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		max-width: 360rpx;
	}

	.goumai {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #167deb;
		border-radius: 28rpx;
		width: 160rpx;
		height: 58rpx;
		opacity: 0.8;
	}

	.goumaia {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #167deb;
		border-radius: 28rpx;
		width: 160rpx;
		height: 58rpx;
		opacity: 0.5;
	}


	.attc {
		width: 148rpx;
		height: 56rpx;
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 28rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.myAttention_fd1_1_c0_c3 {
		border: 1px solid #F06600;
		background: rgba(240, 102, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 314rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: rgba(240, 102, 0, 1);
		height: 56rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
		font-weight: 400;
	}

	.myAttention_fd1_1_c0_c2_c2 {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-weight: 400;
	}

	.system_flex_2 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.system_fd2_0 {
		font-size: 36rpx;
		font-weight: 800;
		line-height: 44rpx;
		color: #333333;
		margin: 40rpx 0rpx 40rpx 0rpx;
	}

	.system_fd2_1 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.system_fd2_2_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: transparent;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: #167deb;
		width: 268rpx;
	}

	.system_fd2_2_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 103rpx 0rpx 103rpx;
	}

	.system_fd2_2 {
		margin: 37rpx 0rpx 0rpx 0rpx;
	}

	.myAttention_fd1_1_c0_c2_c1 {
		margin: 0rpx 0rpx 0rpx auto;
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
	}

	.myAttention_fd1_1_c0_c2_c0 {
		color: var(--benbenFontColor2);
		font-size: 24rpx;
		font-weight: 400;
	}

	.myAttention_fd1_1_c0_c2 {
		margin: 0rpx 20rpx 16rpx 20rpx;
	}

	.myAttention_fd1_1_c0_c1_c1 {
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		font-weight: 600;
		line-height: 40rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
		max-width: 249rpx;
	}
  .system_flex_3 {
    // background: #fff;
    width: 750rpx;
    height: 200rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    background-size: 100% auto !important;
  }
	.system_fd3_0 {
	  border: 2px solid var(--benbenbdColor0);
	  background: #167deb;
	  border-radius: 44rpx 44rpx 44rpx 44rpx;
	  font-size: 32rpx;
	  color: var(--benbenFontColor3);
	  width: 638rpx;
	  height: 88rpx;
	  line-height: 88rpx;
	  margin: 0rpx 24rpx 0rpx 24rpx;
	  font-weight: 500;
	}
	.myAttention_fd1_1_c0_c1_c0 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 10rpx;
	}

	.myAttention_fd1_1_c0_c1 {
		margin: 16rpx 16rpx 16rpx 16rpx;
	}

	.myAttention_fd1_1_c0_c0 {
		width: 346rpx;
		height: 300rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.myAttention_fd1_1_c0 {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 346rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding: 0rpx 0rpx 24rpx 0rpx;
		box-shadow: 0rpx 3rpx 15rpx #E8E8E8;
		position: relative;
	}

	.myAttention_fd1_1 {
		//margin: 0rpx 0rpx 0rpx 24rpx;
		width: 750rpx;
		padding: 0rpx 24rpx;
		justify-content: space-between;
	}

	.myAttention_fd1_0_c1_c0 {
		color: #333;
		font-size: 24rpx;
		font-weight: 400;
	}

	.myAttention_fd1_0_c1 {
		background: rgba(248, 248, 250, 1);
		padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 0rpx 4rpx 0rpx 4rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		line-height: 56rpx;
	}

	.myAttention_fd1_0_c0_c0 {
		color: rgba(240, 102, 0, 1);
		font-size: 24rpx;
		font-weight: 400;
	}

	.myAttention_fd1_0_c0 {
		background: rgba(254, 243, 235, 1);
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		line-height: 56rpx;
		margin: 0rpx 4rpx 0rpx 0rpx;
	}

	.myAttention_fd1_0 {
		touch-action: none;
		width: 885rpx;
		margin: 32rpx 0rpx 24rpx 24rpx;
	}
</style>